<template>
  <div>
    <div class="flex mb-4">
      <a-input allow-clear placeholder="请输入设备ID" v-model="query.keyword"></a-input>
      <a-button type="primary" @click="list">搜索</a-button>
    </div>
    <a-table
      v-model:selected-keys="form.objects"
      :data="table.data"
      :loading="table.loading"
      :columns="translateColumns(columns)"
      row-key="mediaId"
      :row-selection="{
        selectedRowKeys: form.objects,
        showCheckedAll: true
      }"
      :pagination="{
        pageSize: query.pageSize,
        current: query.pageNum,
        total: query.total
      }"
      @page-change="pageChange"
      @change="onChange"
    >
      <template #goodsName="{ record }">
        <ProductTag :data="record.goodsName.split(',')"></ProductTag>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { fetchMediaList } from "@/api/service/lcd-device/lcd-device";
import { LibrarySize } from "@/api/service/library/types";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";
import { IQuery, TableConfig } from "@/interface/IAxios";

import { form } from "../data/form";

const table = ref<TableConfig<LibrarySize>>({
  rowKey: "mediaId",
  data: [],
  loading: false,
  keys: []
});
// 查询参数
const query = ref<IQuery>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  mType: ["3"],
  keyword: "",
  scope: ENUM_DATA_SCOPE.THIS_SHOP
});

const list = async () => {
  table.value.loading = true;

  const data = await fetchMediaList(query.value);
  table.value.data = data.rows;
  query.value.total = data.total;
  table.value.loading = false;
};

onMounted(() => {
  list();
});

const columns: any[] = [
  {
    dataIndex: "mediaId",
    title: "设备ID"
  },
  {
    dataIndex: "storeName",
    title: "门店名称"
  },
  {
    dataIndex: "goodsName",
    title: "商品名称"
  },
  {
    dataIndex: "resolutionDesc",
    title: "分辨率"
  }
];

const pageChange = (page: number) => {
  query.value.pageNum = page;
  list();
};

const onChange = () => {};
</script>

<style lang="scss" scoped></style>
